<template>
  <router-link :to="'/product/' + info.pro_no" class="feed-wrapper">
    <img :src="info.img" class="feed-img" />
    <h4 class="feed-title">{{ info.title }}</h4>
    <span class="keywords">{{ info.keywords }}</span>
    <span class="price">{{ info.price }}元</span>
  </router-link>
</template>
<script setup lang="ts">
const {
  info = {},
} = defineProps({
  info: Object,
});
</script>
<style scoped>
.feed-wrapper {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease all;
  padding: 0 10px;
  overflow: hidden;
}

.feed-wrapper:hover {
  box-shadow: 2px 8px 18px #3f3f3f33;
  transform: translateY(-5px);
}

.feed-img {
  width: 200px;
}

.feed-title {
  margin-bottom: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.keywords {
  color: #3f3f3faa;
}

.price {
  margin: 10px 0 20px;
  color: #18aa58;
}
</style>